<template>
	<view class="volunteerCenter row">
		<view class="attestation">
			<view class="showCertification">
				<template v-if="attestationStatus!=10">
					<image :src=" dataInfo.headPortraitImg || require('@/static/noIng.jpg')" mode=""></image>
					<text>{{ attestationStatus== 0 ? '未认证' : '审核中' }}</text>
				</template>
				<template v-else>
					<image :src=" dataInfo.headPortraitImg || require('@/static/noIng.jpg')" mode=""></image>
					<view class="message">
						<view class="name">
							<text>{{ dataInfo.name || '---' }}</text>
						</view>
						<view class="phone">
							<text>{{ phone }}</text>
							<text @click="fillIn">详情></text>
						</view>
					</view>
				</template>
			</view>
			<text v-if="attestationStatus == 0" class="go_certification" @click="fillIn('1','authentication')">去认证 ></text>
			<text v-else-if="attestationStatus == 1" class="go_certification">审核中 ></text>
		</view>
		<view class="border"></view>
		<view class="attestationList" v-if="attestationStatus == 10">
			<van-tabs :active="active" title-active-color="#ffffff" title-inactive-color="#000" type="card" color="#34CC5F" sticky animated swipeable @change="onChange">
				 <van-tab title="待领取">
					 <view v-if="dataList.length">
						 <view class="list" v-for="(item,index) in dataList" :key="item.id">
						 	<view class="content">
						 		<text class="c_title">{{ item.title }}</text>
						 		<view class="c_identify">

						 		</view>
						 		<text class="c_cont">{{ item.address }}</text>
						 		<text class="c_state" @click="fillIn(item.id,'authenticate',2)">详情</text>
						 	</view>
						 	<view class="btn">
						 		<van-button class="button" type="primary" @click="receive(item,index)">领取</van-button>
						 	</view>
						 </view>
					 </view>
					 <view v-else class="noData">
					 	<image src="../../static/noData.png"></image>
					 	<view class="text">暂无数据</view>
					 </view>
					 <view class="loading" v-show="isShowMore">没有更多数据了~</view>
				 </van-tab>
				 <van-tab title="待鉴定">
					<view v-if="dataList.length">
						<view class="list" v-for="(item,index) in dataList" :key="item.id">
							<view class="content">
								<text class="c_title">{{ item.title }}</text>
								<view class="c_identify">
								</view>
								<text class="c_cont">{{ item.address }}</text>
								<text class="c_state @click="fillIn(item.id,'authenticate',2)"">详情</text>
							</view>
							<view class="btn">
								<van-button class="button" type="primary" @click="fillIn(item.id,'authenticate')">去鉴定</van-button>
							</view>
						</view>
					</view>
					<view v-else class="noData">
						<image src="../../static/noData.png"></image>
						<view class="text">暂无数据</view>
					</view>
					<view class="loading" v-show="isShowMore">没有更多数据了~</view>
				 </van-tab>
				 <van-tab title="已完成">
						<view v-if="dataList.length">
							<view class="list" v-for="(item,index) in dataList" :key="item.id">
								<image class="img" src="../../static/noPictures.jpg" mode=""></image>
								<view class="content">
									<text class="c_title">{{ item.title }}</text>
									<view class="c_identify">
									</view>
									<text class="c_cont">{{ item.address }}</text>
									<text class="c_state" @click="fillIn(item.id,'authenticate',1)">详情</text>
								</view>
								<view class="btn">
									<view class="button btnText">已完成</view>
								</view>
							</view>
						</view>
						<view v-else class="noData">
							<image src="../../static/noData.png"></image>
							<view class="text">暂无数据</view>
						</view>
						<view class="loading" v-show="isShowMore">没有更多数据了~</view>
				 </van-tab>
			</van-tabs>
		</view>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
	import { getByOwn, unclaimedList, auditList, finishedList, caseAppraisalAdd } from '@/api/my'
	export default {
		name: 'volunteerCenter',
		data() {
			return {
				attestationStatus: '0',
				active: 0,
				dataInfo: {},
				pagination: {
					pageSize: 10,
					pageNum: 1
				},
				total: 0,
				dataList: []
			}
		},
		onShow() {
			this.getUsrInfo()
		},
		onPullDownRefresh() {
			this.pagination.pageNum = 1;
			setTimeout(() => {
				this.getList();
			}, 200)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1300);
		},
		onReachBottom() {
			if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
				return
			}
			this.pagination.pageNum ++;
			this.getList('more')
		},
		computed: {
			phone() {
				let modile = ''
				if (this.dataInfo.phone) {
					modile = this.dataInfo.phone.replace(this.dataInfo.phone.substring(3,7), "****")
				}
				return modile
			},
			isShowMore() {
				if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total && this.total!=0) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			getUsrInfo() {
				getByOwn().then(res => {
					if (res.data) {
						let storge = this.$storage.getItem('roleDataInfo');
						this.attestationStatus = res.data.status;
						this.dataInfo = {
							...storge,
							...res.data,
							type: '2'
						}
						this.reset(res.data.status)
					}
				})
			},
			fillIn(val=1,mode,status=1) {
				if (mode == 'authenticate') {
					uni.navigateTo({
						url: `./authenticate?id=${val}&status=${status}`
					})
				} else if (mode == 'authentication') {
					uni.navigateTo({
						url: `./authentication?id=${val}`
					})
				}else {					
					uni.navigateTo({
						url: `../personal/index?id=${val}`
					})
				}
			},
			// 选择nav
			onChange(e) {
				this.active = e.detail.name;
				this.reset(this.attestationStatus);
			},
			// 获取分页列表
			getList(mode) {
				if (this.active == 0) {
					unclaimedList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if(this.active == 1){
					auditList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if (this.active == 2) {
					finishedList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				}
			},
			//清空重置
			reset(type) {
				this.dataList = [];
				this.pagination = {
					pageSize: 10,
					pageNum: 1
				};
				this.total = 0;
				if(type == 10) {
					this.getList()
				}
			},
			//领取
			receive(val,index) {
				this.$showModal({
					title: '提示',
					content: '是否领取该任务？',
					showCancel: true,
				}, (res) => {
					caseAppraisalAdd({ caseId: val.id }).then(res => {
						uni.showToast({
							title: '领取成功',
							duration: 2000,
							icon: 'success'
						});
						this.dataList.splice(index, 1);
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.volunteerCenter {
		width: 100%;
		position: relative;
		padding: 10rpx 20rpx;
		background-color: #F5F5F5;
		box-sizing: border-box;
		min-height: 100vh;
		.attestation {
			margin: 0 10rpx;
			padding: 40rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			.showCertification {
				width: 100%;
				display: flex;
				align-items: center;
				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
				text {
					font-weight: bold;
					font-size: 34rpx;
					color: #000;
					margin-left: 40rpx;
				}
				.message {
					font-size: 26rpx;
					flex: 1;
					/deep/ .van-field__input {
						min-width: 150rpx;
						width: 150rpx;
						max-height: 300rpx;
					}
					.phone {
						width: 100%;
						display: flex;
						justify-content: space-between;
					}
					text {
						font-size: 26rpx;
						color: #000;
						font-weight: normal;
						margin-left: 30rpx;
						margin-top: 30rpx;
					}
				}
			}
			.go_certification {
				position: absolute;
				bottom: 10rpx;
				right: 20rpx;
				color: #A4A4A4;
			}
		}
		.border {
			margin-top: 20rpx;
			margin-bottom: 10rpx;
			border-bottom: 1rpx solid #E1E0E1;
		}
		.attestationList {
			.list {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				padding: 30rpx;
				background-color: #FFFFFF;
				.img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}
				.content {
					height: 100%;
					display: flex;
					width: calc(100% - 180rpx - 100rpx - 20rpx - 48rpx);
					margin-left: 20rpx;
					margin-right: 40rpx;
					flex-direction: column;
					justify-content: center;
					.c_title {
						font-size: 36rpx;
						color: #313131;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.c_identify {
						margin: 20rpx 0;
						text {
							margin-left: 20rpx;
							background-color: #E8E8E8;
							font-size: 20rpx;
							text-align: center;
							display: inline-block;
							border-radius: 20rpx;
							width: 80rpx;
							padding: 6rpx 0;
							&:first-child {
								margin-left: 0;
							}
						}
					}
					.c_cont {
						padding: 10rpx 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 30rpx;
						color: #999;
					}
					.c_state {
						width: 60rpx;
						padding: 8rpx 30rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						background-color: #f5f5f5;
					}
				}
				.btn {
					width: 100rpx;
					position: relative;
					.button {
						width: 130rpx;
						height: 50rpx;
						position: absolute;
						bottom: 0;
						left: -30rpx;
						font-size: 24rpx;
						&.btnText {
							width: 80rpx;
							left: 0;
						}
						/deep/ .van-button--normal {
							color: #000;
							width: 100%;
							height: 100%;
							padding: 0 0;
							border: none;
							border: 1px solid #BCEFCD;
							background-color: #FFFFFF;
						}
					}
				}
			}
			/deep/ .van-tabs__wrap {
				height: 80rpx;
				.van-tabs__scroll {
					margin: 0;
					height: 100%;
					.van-tabs__nav {
						height: 100%;
						border-color: #9BCDAF;
						.van-ellipsis {
							line-height: 80rpx;
						}
					}
				}
			}
		}
	}
</style>
